import React, { Component } from 'react';
import { Form, Icon, Button, Input } from 'antd';

const FormItem = Form.Item;

class LoginForm extends Component {
  state = {}

  login = (e) => {
    const { form, onLogin } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        onLogin && onLogin(values)
      }
    });
    e && e.preventDefault();
  }

  render() {
    const { errorMsg, loading, form, showTenant } = this.props;
    const { getFieldDecorator } = form;
    const colorStyle = { color: 'rgba(0,0,0,.25)' };
    const FormItemStyle = {  margin: 0 };
    return (
      <Form className="login-form">
        {errorMsg ? (
          <FormItem style={FormItemStyle}>
            {getFieldDecorator('errMessage')(
              <span className='errMessage'>{errorMsg}</span>
            )}
          </FormItem>
        ) : null}
        {showTenant ? (
          <FormItem>
            {getFieldDecorator('tenantCode', {
              rules: [{required: false, message: '请输入租户账号!'}]
            })(
              <Input prefix={<Icon type="user" style={colorStyle}/>} placeholder="租户账号"/>
            )}
          </FormItem>
        ) : null}
        <FormItem>
          {getFieldDecorator('account', {
            initialValue: '',
            rules: [{required: true, message: '请输入用户名!'}]
          })(
            <Input prefix={<Icon type="user" style={colorStyle} />} placeholder="用户名"/>
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('password', {
            initialValue: '',
            rules: [{required: true, message: '请输入密码!'}]
          })(
            <Input prefix={<Icon type="lock" style={colorStyle}  />}type="password" placeholder="密码"/>
          )}
        </FormItem>
        <FormItem>
          <Button loading={loading} type="primary" onClick={this.login} className="login-form-button">
            {!loading ? '登录' : '登录中'}
          </Button>
        </FormItem>
      </Form>
    );
  }
}

export default Form.create({})(LoginForm);
